<template>
  <div class="ImageComparison-container">
    <!-- 左侧地图 -->
    <div class="left-map" ref="mapOneDOM"></div>
    <!-- 右侧地图 -->
    <div class="right-map" ref="mapTwoDOM"></div>
    <!-- 左侧年份选择 -->
    <div class="year-left-wrapper">
      <div class="year-resu">
        <div class="year-cont" @click="handleShowLeft('left')">{{this.showLeftYear}}</div>
      </div>
      <div class="year-list" v-if="showLeftYearDrop">
        <div
          class="year-item"
          v-for="item in imgDataList"
          :key="item.id"
          @click="selectYearName('left',item)"
        >{{item}}</div>
      </div>
    </div>
    <!-- 右侧年份选择 -->
    <div class="year-right-wrapper">
      <div class="year-resu">
        <div class="year-cont" @click="handleShowLeft('right')">{{this.showRightYear}}</div>
      </div>
      <div class="year-list" v-if="showRightYearDrop">
        <div
          class="year-item"
          v-for="item in imgDataList"
          :key="item.id"
          @click="selectYearName('right',item)"
        >{{item}}</div>
      </div>
    </div>
    <!-- 中间火区选择 -->
    <div class="center-select">
      <input
        class="select-value"
        placeholder="请选择火区"
        v-model="fireNameTest"
        @click="handleFirelistActive"
      />
      <div class="select-table" v-if="firelistActive">
        <div
          class="table-item"
          v-for="item in CenterFireList"
          :key="item.id"
          @click="handleFireName(item)"
          :title="item.fireName"
        >{{item.fireName}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import TileWMS from "ol/source/TileWMS";
import { defaults as defaultControls } from "ol/control";
import { defaults as defaultInteractions } from "ol/interaction";
import { FireImageList } from "../../../../../api/gis/layer";

import { FireAreaByName } from "../../../../../api/gis/layer";
import { Message } from "element-ui";
export default {
  data() {
    return {
      wmsAddress: "",
      wmsName: "",

      fireNameTest: "",
      fireId: 0,
      firelistActive: false,

      leftMap: undefined,
      rightMap: undefined,

      showLeftYear: "请选择目标影像",
      showRightYear: "请选择目标影像",

      showLeftYearDrop: false,
      showRightYearDrop: false,

      CenterFireList: [],
      imgDataList: [],
      // imgAddressList: [],
      // imgBasenameList: [],
      imgObj: []
    };
  },
  mounted() {
    this.handleMapInit();
    this.loadFireList();
  },
  methods: {
    // 年份选择判断校验
    handleShowLeft(label) {
      if (this.imgDataList.length > 0) {
        if (label === "left") {
          this.showLeftYearDrop = true;
        } else if (label === "right") {
          this.showRightYearDrop = true;
        }
      } else {
        Message({
          message: `请先选择火区或当前火区不存在影像数据`,
          type: "warning"
        });
      }
    },
    // 获取列表选择判断校验
    handleFirelistActive() {
      this.firelistActive = true;
      // 重新选择火区的时候初始化
      this.showLeftYearDrop = false;
      this.showRightYearDrop = false;
      this.imgDataList = [];
      this.showLeftYear = "请选择目标影像";
      this.showRightYear = "请选择目标影像";
    },
    // 加载火区列表获取获取名称-中间
    loadFireList() {
      FireImageList().then(res => {
        if (res.code === 200) {
          res.data.rows.forEach(item => {
            const listItem = {
              id: item.id,
              fireName: item.fireName
            };
            this.CenterFireList.push(listItem);
          });
        }
      });
    },
    // 获取选择传递影像参数信息
    handleFireName(e) {
      this.fireNameTest = e.fireName;
      this.fireId = e.id;
      this.firelistActive = false;
      this.handleFireListByName();
    },
    // 获取火区影像数据信息(通过监听)
    handleFireListByName() {
      FireAreaByName({ fireName: this.fireNameTest, id: this.fireId }).then(
        res => {
          if (res.code === 200) {
            this.imgObj = res.data.rows[0].cfeCoalfieldBasicImageList;
            res.data.rows.forEach(item => {
              const imgInfo = item.cfeCoalfieldBasicImageList;
              imgInfo.forEach(items => {
                this.imgDataList.push(items.imageTime); //火区影像服务时间选择列表
                // this.imgAddressList.push(items.imageAddress); //火区影像服务地址地址选择列表
                // this.imgBasenameList.push(items.imageName); //火区影像服务名称地址选择列表
              });
              // console.log(this.imgDataList);
              // console.log(this.imgAddressList);
              // console.log(this.imgBasenameList);
            });
          }
        }
      );
    },
    // 年份选择完成影像加载
    selectYearName(flag, data) {
      // data表示时间2020-06-27
      if (flag === "left") {
        this.showLeftYear = data;
        this.showLeftYearDrop = false;
        // 判断是否有影像存在，清空历史
        const layer = this.leftMap.getLayers();
        if (layer.array_.length >= 2) {
          layer.array_.splice(1);
        }
        // 查找对应的服务地址和服务名称
        this.imgObj.forEach(item => {
          if (item.imageTime == data) {
            this.wmsAddress = item.imageAddress;
            this.wmsName = item.imageName;
          }
        });
        // 加载目标时间影像数据
        this.handleAddUnderLayer(this.leftMap, this.wmsAddress, this.wmsName);
      } else if (flag === "right") {
        this.showRightYear = data;
        this.showRightYearDrop = false;
        // 判断是否有影像存在，清空历史
        const layer = this.rightMap.getLayers();
        if (layer.array_.length >= 2) {
          layer.array_.splice(1);
        }
        // 查找对应的服务地址和服务名称
        this.imgObj.forEach(item => {
          if (item.imageTime == data) {
            this.wmsAddress = item.imageAddress;
            this.wmsName = item.imageName;
          }
        });
        // 加载目标时间影像数据
        this.handleAddUnderLayer(this.rightMap, this.wmsAddress, this.wmsName);
      }
    },
    handleMapInit() {
      // 【1】View
      const view = new View({
        // 设置投影坐标系
        projection: "EPSG:4326",
        // 地图初始中心点
        center: [90.16701, 44.6436],

        // 地图视图显示级别
        zoom: 12
        // maxZoom: 14
      });
      // 【2】LeftMap
      const leftMap = new Map({
        target: this.$refs.mapOneDOM,
        controls: defaultControls({
          // 不显示放大放小控件
          zoom: false,
          // 不显示指北针控件
          rotate: false
        }),
        interactions: defaultInteractions({
          pinchRotate: false // 移动端禁止地图旋转
        })
      });
      leftMap.setView(view);
      this.leftMap = leftMap;
      const leftBaseLayer = new TileLayer({
        // 谷歌地图影像图层
        source: new XYZ({
          // lyrs=y表示:卫星图加注记; lyrs=s表示:卫星图无注记
          url:
            "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}",
          crossOrigin: true
        })
      });
      leftMap.addLayer(leftBaseLayer);
      // 【2】RightMap
      const rightMap = new Map({
        target: this.$refs.mapTwoDOM,
        controls: defaultControls({
          // 不显示放大放小控件
          zoom: false,
          // 不显示指北针控件
          rotate: false
        }),
        interactions: defaultInteractions({
          pinchRotate: false // 移动端禁止地图旋转
        })
      });
      rightMap.setView(view);
      this.rightMap = rightMap;
      const rightBaseLayer = new TileLayer({
        // 谷歌地图影像图层
        source: new XYZ({
          // lyrs=y表示:卫星图加注记; lyrs=s表示:卫星图无注记
          url:
            "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}",
          crossOrigin: true
        })
      });
      rightMap.addLayer(rightBaseLayer);
    },
    handleAddUnderLayer(map, address, name) {
      // 加载wms图层
      const wmsLayer = new TileLayer({
        source: new TileWMS({
          url: address,
          //参数配置
          params: {
            //工作空间:服务名称
            LAYERS: name,
            format: "image/png",
            VERSION: "1.1.1"
          }
        })
      });
      map.addLayer(wmsLayer);
    }
  }
};
</script>

<style lang="scss" scoped>
.ImageComparison-container {
  width: 100%;
  height: 100%;
  display: flex;
  direction: row;
  justify-content: space-between;
  position: relative;
  z-index: 999;
  .left-map {
    pointer-events: all;
    width: 50%;
    height: 100%;
    border-right: solid 2px rgb(8, 16, 42, 0.8);
    z-index: 30;
  }
  .right-map {
    pointer-events: all;
    width: 50%;
    height: 100%;
    z-index: 30;
  }
  .year-left-wrapper {
    z-index: 99999999999;
    position: absolute;
    top: 200px;
    left: 80px;
    width: 200px;
    height: 30px;
    .year-resu {
      background: url("../../../../../assets/img/OneMap/图层属性信息.png")
        no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
      display: flex;
      direction: row;
      justify-content: space-between;
      align-items: center;

      .year-cont {
        width: calc(100% - 13px);

        font-family: "AlibabaPuHuiTi-2-85-Bold";
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        cursor: pointer;
      }
    }
    .year-list {
      width: 100%;
      height: 150px;
      background-color: rgba(0, 0, 0, 0.7);
      overflow-x: hidden;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .year-item {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-family: "AlibabaPuHuiTi-2-55-Regular";
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        padding-left: 15px;
        border-bottom: solid 1px#000000;
        cursor: pointer;
      }
    }
  }
  .year-right-wrapper {
    z-index: 99999999999;
    position: absolute;
    top: 200px;
    right: 80px;
    width: 200px;
    height: 30px;
    .year-resu {
      background: url("../../../../../assets/img/OneMap/图层属性信息.png")
        no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
      display: flex;
      direction: row;
      justify-content: space-between;
      align-items: center;

      .year-cont {
        width: calc(100% - 13px);

        font-family: "AlibabaPuHuiTi-2-85-Bold";
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        cursor: pointer;
      }
    }
    .year-list {
      width: 100%;
      height: 150px;
      background-color: rgba(0, 0, 0, 0.7);
      overflow-x: hidden;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .year-item {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-family: "AlibabaPuHuiTi-2-55-Regular";
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        padding-left: 15px;
        border-bottom: solid 1px#000000;
        cursor: pointer;
      }
    }
  }
  .center-select {
    z-index: 99999999999;
    position: absolute;
    left: 810px;
    top: 200px;
    width: 300px;
    // height: 50px;

    .select-value {
      text-align: center;
      background: transparent; //去掉背景
      border: none; //去掉边框
      outline: none;
      width: 100%;
      height: 45px;
      font-family: "AlibabaPuHuiTi-2-55-Regular";
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
      background: url("../../../../../assets/img/OneMap/选择背景.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .select-table {
      margin-left: 10px;
      width: 280px;
      height: 150px;
      background-color: rgba(0, 0, 0, 0.7);
      /* 添加如下内容超出部分出现滚轮 */
      overflow-x: hidden;
      overflow-y: auto;
      // scrollbar-width: none; /* Firefox */
      // -ms-overflow-style: none; /* IE10+ */
      &::-webkit-scrollbar {
        display: none; /* ChromeSafari */
      }

      .table-item {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-family: "AlibabaPuHuiTi-2-55-Regular";
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        padding-left: 15px;
        border-bottom: solid 1px#000000;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>

